<template>
  <div class="flex items-center justify-center gap-2">
    <el-select v-model="model" placeholder="请选择方案" @change="change" style="width: 100px">
      <el-option v-for="item in planStore.plans" :label="item.name" :value="item.id" :key="item.id" />
      <template #footer>
        <el-button size="small" class="w-full" type="primary" @click="visible = true">
          <Plus theme="outline" size="14" fill="#fff" />
          新增方案
        </el-button>
      </template>
    </el-select>

    <el-input :value="planStore.plan?.w" disabled class="w-[200px]">
      <template #prepend>
        <Reel theme="outline" size="14" fill="#2d3436" />
      </template>
      <template #append>kg/m</template>
    </el-input>

    <el-input :value="planStore.plan?.H" disabled class="w-[200px]">
      <template #prepend>
        <Magnet theme="outline" size="14" fill="#2d3436" />
      </template>
      <template #append>kN</template>
    </el-input>

    <el-button-group>
      <!-- 方案表格 -->
      <el-button type="info" size="small" @click="tbVisible = true">
        <InsertTable theme="outline" size="14" fill="#b2bec3" />
      </el-button>
      <!-- 布线数据 -->
      <el-button type="info" size="small" @click="buLineVisible = true">
        <AssemblyLine theme="outline" size="14" fill="#b2bec3" />
      </el-button>
      <!-- 布线计算 -->
      <el-button type="info" size="small" @click="calcVisible = true">
        <CalculatorOne theme="outline" size="14" fill="#b2bec3" />
      </el-button>
    </el-button-group>

    <CalcConfigDialog v-model="visible" @change="change" />
    <PlanTableDialog v-model="tbVisible" />
    <BuLineDialog v-model="buLineVisible" />
    <CalcLineDialog v-model="calcVisible" :planId="model" />
  </div>
</template>

<script setup lang="ts">
import useCalcBetstore from '@/states/useCalcBetstore'
import usePlanStore from '@/states/usePlanStore'
import { AssemblyLine, CalculatorOne, InsertTable, Magnet, Plus, Reel } from '@icon-park/vue-next'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import CalcConfigDialog from './ImageHeader/CalcConfigDialog.vue'
import PlanTableDialog from './ImageHeader/PlanTableDialog.vue'
import BuLineDialog from './FixedPlan/BuLineDialog.vue'
import useTowerStore from '@/states/useTowerStore'
import useReadStore from '@/states/useReadStore'
import CalcLineDialog from './FixedPlan/CalcLineDialog.vue'

const planStore = usePlanStore()
const calcBetStore = useCalcBetstore()
const towerStore = useTowerStore()
const readStore = useReadStore()

const route = useRoute()
const model = ref()
const visible = ref(false)
const tbVisible = ref(false)
const buLineVisible = ref(false)
const calcVisible = ref(false)

async function init() {
  await towerStore.all({ lineId: +route.params.id })
  if (!towerStore.towers.length) {
    await readStore.read(+route.params.id)
  }

  await planStore.all({ id: +route.params.id })
  if (planStore.plans.length == 0) {
    visible.value = true
    return
  }
  model.value = planStore.plans[0]?.id
  await planStore.find(model.value)
  await calcBetStore.all({ id: model.value })
}

async function change(id = model.value) {
  model.value = id
  await planStore.find(id)
  await calcBetStore.all({ id })
}

init()
</script>

<style></style>
